<template>
  <div class="chat-container">
    <!-- 顶部导航栏 -->
    <div class="tabs">
      <div
        v-for="tab in tabs"
        :key="tab.id"
        :class="['tab', { active: activeTab === tab.id }]"
        @click="activeTab = tab.id"
      >
        {{ tab.label }}
      </div>
    </div>

    <!-- 聊天列表 -->
    <div class="chat-list">
      <div v-for="section in sections" :key="section.id" class="section">
        <!-- 分组标题 -->
        <div class="section-header" @click="toggleSection(section.id)">
          <div class="section-icon">
            <van-icon :name="section.expanded ? 'arrow-down' : 'arrow-right'" />
          </div>
          <div class="section-title">{{ section.title }}</div>
          <div class="section-count">{{ section.contacts.length }}</div>
        </div>

        <!-- 联系人列表 -->
        <div v-if="section.expanded" class="contacts">
          <div
            v-for="contact in section.contacts"
            :key="contact.id"
            class="contact-item"
          >
            <!-- 头像 -->
            <div class="avatar-container">
              <img :src="contact.avatar" :alt="contact.name" class="avatar" />
              <div v-if="contact.online" class="online-indicator"></div>
            </div>

            <!-- 联系人信息 -->
            <div class="contact-info">
              <div class="contact-header">
                <div class="contact-name">{{ contact.name }}</div>
                <div v-if="contact.time" class="contact-time">
                  {{ contact.time }}
                </div>
              </div>
              <div class="contact-status">
                {{ contact.message || contact.status }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
    
    <script setup lang="ts">
import { ref } from "vue";

// 定义类型
interface Tab {
  id: string;
  label: string;
}

interface Contact {
  id: number;
  name: string;
  avatar: string;
  status: string;
  message?: string;
  time?: string;
  online: boolean;
}

interface Section {
  id: number;
  title: string;
  expanded: boolean;
  contacts: Contact[];
}

// 标签页数据
const tabs: Tab[] = [
  { id: "friends", label: "好友" },
  { id: "groups", label: "分组" },
  { id: "chats", label: "群聊" },
  { id: "channels", label: "频道" },
  { id: "bots", label: "机器人" },
  { id: "devices", label: "设备" },
  { id: "contacts", label: "通讯录" },
];

// 当前激活的标签
const activeTab = ref<string>("friends");

// 分组和联系人数据
const sections = ref<Section[]>([
  {
    id: 1,
    title: "特别关心",
    expanded: true,
    contacts: [
      {
        id: 1,
        name: "51",
        avatar: "https://placeholder.pics/svg/40",
        status: "[WiFi在线]",
        online: true,
      },
      {
        id: 2,
        name: "仙",
        avatar: "https://placeholder.pics/svg/40",
        status: "[iPhone在线]",
        online: true,
      },
    ],
  },
  {
    id: 2,
    title: "学院",
    expanded: true,
    contacts: [
      {
        id: 3,
        name: "白文奇",
        avatar: "https://placeholder.pics/svg/40",
        status: "[5G在线]",
        online: true,
      },
      {
        id: 4,
        name: "贾博铭",
        avatar: "https://placeholder.pics/svg/40",
        status: "[5G在线]",
        message: "🔒[5小时内]同事的计划全面和展示的在在一起呢。",
        time: "22:08",
        online: true,
      },
      {
        id: 5,
        name: "吴梦凡",
        avatar: "https://placeholder.pics/svg/40",
        status: "[5G在线]",
        online: true,
      },
      {
        id: 6,
        name: "霍庆华 15291026315",
        avatar: "https://placeholder.pics/svg/40",
        status: "[5G在线]",
        message: "👋(´∀`)最爱的功能人都很喜欢个特别的...",
        online: true,
      },
      {
        id: 7,
        name: "何海洋",
        avatar: "https://placeholder.pics/svg/40",
        status: "[WiFi在线]",
        online: true,
      },
      {
        id: 8,
        name: "霍天枫",
        avatar: "https://placeholder.pics/svg/40",
        status: "[5G在线]",
        message: "好在哪",
        online: true,
      },
    ],
  },
]);

// 切换分组展开/折叠
const toggleSection = (sectionId: number): void => {
  const sectionIndex = sections.value.findIndex((s) => s.id === sectionId);
  if (sectionIndex !== -1) {
    sections.value[sectionIndex].expanded =
      !sections.value[sectionIndex].expanded;
  }
};
</script>
    
    <style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #1e1e1e;
  color: #e0e0e0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

/* 标签栏样式 */
.tabs {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid #2c2c2c;
  scrollbar-width: none; /* Firefox */
}

.tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

.tab {
  padding: 12px 16px;
  white-space: nowrap;
  font-size: 14px;
  color: #8e8e8e;
  cursor: pointer;
}

.tab.active {
  color: #2b7bef;
}

/* 聊天列表样式 */
.chat-list {
  flex: 1;
  overflow-y: auto;
}

.section {
  margin-bottom: 4px;
}

.section-header {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  font-size: 12px;
  color: #8e8e8e;
  cursor: pointer;
}

.section-icon {
  margin-right: 4px;
}

.section-count {
  margin-left: 4px;
  color: #666;
}

/* 联系人样式 */
.contacts {
  display: flex;
  flex-direction: column;
}

.contact-item {
  display: flex;
  padding: 8px 16px;
  cursor: pointer;
}

.contact-item:hover {
  background-color: #2c2c2c;
}

.avatar-container {
  position: relative;
  margin-right: 12px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
}

.online-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background-color: #4caf50;
  border-radius: 50%;
  border: 2px solid #1e1e1e;
}

.contact-info {
  flex: 1;
  min-width: 0; /* 确保文本可以正确截断 */
}

.contact-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.contact-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-time {
  font-size: 12px;
  color: #8e8e8e;
  white-space: nowrap;
  margin-left: 8px;
}

.contact-status {
  font-size: 13px;
  color: #8e8e8e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>